<div *ngIf="isLoading" style="position:absolute;top:0px;left:0px;right:0px;bottom:0px;background-color:rgba(0,0,0,0.2); z-index: 99999;">
	<mat-progress-bar mode="indeterminate" color="warn" style="position: absolute; top: 0px; left: 0px; right: 0px; z-index: 99999;">
	</mat-progress-bar>
</div>
<mat-sidenav-container class="sidenav-container" [hasBackdrop]="false">
	<mat-sidenav #matsidenav *ngIf="showNavigation && showSidenav" class="sidenav" [mode]="showSidenav">
		<app-sidenav #sidenav [sidenav]="matsidenav" (goToPage)="onGoToPage($event)" (goToLink)="onGoToLink($event)"></app-sidenav>
	</mat-sidenav>
	<mat-sidenav-content [style.background-color]="backgroudColor" (click)="checkToCloseSideNav()">
		<div *ngIf="showNavigation" class="header" [style.background-color]="layoutHeader.bkcolor" [style.color]="layoutHeader.fgcolor">
			<button mat-icon-button *ngIf="showSidenav && showSidenav !== 'side'" 
				(click)="$event.stopPropagation(); (matsidenav.opened) ? matsidenav.close() : matsidenav.open()" class="sidenav-toogle">
				<mat-icon aria-label="Menu">menu</mat-icon>
			</button>
			<div class="header-title">
				{{title}}
			</div>
			<div *ngIf="securityEnabled" class="header-login">
				<button mat-icon-button (click)="onLogin()">
					<mat-icon aria-label="Login" [style.color]="isLoggedIn() ? 'rgb(59, 144, 255)' : layoutHeader.fgcolor">account_circle</mat-icon>
				</button>
			</div>
			<div class="header-button">
				<div class="alarm-layout" style="min-width: 40px;">
					<button mat-icon-button *ngIf="alarms.show" (click)="onAlarmsShowMode('collapse')">
						<mat-icon aria-label="Alarms">notifications_none</mat-icon>
						<div class="button-counter alarm-color" [style.opacity]="alarms.count?'':'0'">{{alarms.count}}</div>
					</button>
				</div>
				<div class="info-layout" style="min-width: 40px;">
					<button mat-icon-button *ngIf="infos.show" (click)="onAlarmsShowMode('collapse')">
						<mat-icon aria-label="Info">error_outline</mat-icon>
						<div class="button-counter info-color" [style.opacity]="infos.count?'':'0'">{{infos.count}}</div>
					</button>
				</div>
			</div>
		</div>
		<div id="container"  class="home-container" #container (click)="checkToCloseSideNav()">
			<app-cards-view *ngIf="!showHomeLink && homeView.type === cardViewType" #cardsview [edit]="false" [options]="gridOptions" [view]="homeView" [hmi]="hmi" [gaugesManager]="gaugesManager"></app-cards-view>
			<app-fuxa-view *ngIf="!showHomeLink && homeView.type !== cardViewType" #fuxaview class="home-body" id="home" [view]="homeView" [hmi]="hmi" [gaugesManager]="gaugesManager"></app-fuxa-view>
			<app-iframe *ngIf="showHomeLink" [hidden]="isLoading || !showHomeLink" #iframeview [link]="homeLink" class="home-body" style="width:100%; height:100%"></app-iframe>
			<!-- <div [style.display]="(homeView.type === cardViewType || showHomeLink) ? 'none' : 'block' " class="home-body home-info">
				<p>
					{{'msg.home-welcome' | translate}}.
				</p>
			</div> -->
			<div id="alarms-panel">
				<app-alarm-view #alarmsview [fullview]="false" (showMode)="onAlarmsShowMode($event)"></app-alarm-view>
			</div>
		</div>
	</mat-sidenav-content>

</mat-sidenav-container>